<template>
  <h2>{{ msg }}</h2>
  <button @click="msg += '!'">修改msg</button>
</template>

<script lang="ts">
import { ref, watch } from "vue";

export default {
  setup() {
    let msg = ref("Hello");

    watch(
      msg,
      (newvalue, oldvalue) => {
        console.log("msg被修改了", "新：" + newvalue, "旧：" + oldvalue);
      },
      { immediate: true }
    ); //立即监视，初始化时被调用一次

    return { msg };
  },
};
</script>
<style></style>
